---
title: 'derive'
section: 'API'
subSection: 'Utils'
description: 'create a new proxy derived from others'
---

## `derive`

## Installation

```bash
npm install derive-valtio
```

#### create a new proxy derived from others

You can subscribe to some proxies using `get` to create snapshots used to compute new values.

```js
import { derive } from 'derive-valtio'

// create a base proxy
const state = proxy({
  count: 1,
})

// create a derived proxy
const derived = derive({
  doubled: (get) => get(state).count * 2,
})

// alternatively, attach derived properties to an existing proxy
derive(
  {
    tripled: (get) => get(state).count * 3,
  },
  {
    proxy: state,
  },
)
```

## `underive`

## Stop evaluating

In some cases you may want to unsubscribe after deriving a proxy. To do so, use the `underive` util. You may also pass keys to indicate which properties you want to unsubscribe. If you specify `delete` option, it will delete the properties
and you can attach new derived properties.

```js
import { derive, underive } from 'derive-valtio'
const state = proxy({
  count: 1,
})

const derivedState = derive({
  doubled: (get) => get(state).count * 2,
})

underive(derivedState)
```

## Usage patterns

### Re-computes when unrelated properties change

With `derive`, the computation will occur if any property of the base proxy changes. Example:

```javascript
const baseProxy = proxy({
  counter1: 0,
  counter2: 0,
  counter3: 0,
  counter4: 0,
})

const countersOneAndTwoSelectors = derive({
  sum: (get) => get(baseProxy).counter1 + get(baseProxy).counter2,
})
```

In this example if `baseProxy.counter3` or `baseProxy.counter4` are changed, `countersOneAndTwoSelectors` will re-compute all of the keys in it.

### `get` sub-objects due to update of unrelated proxies on parent proxy

As noted on this page, re-computation occurs when unrelated properties change. It is possible to use `get` on sub-objects. This has the benefit of not re-computing when properties of the parent object are updated. Example:

```javascript
const baseProxy = proxy({
  counter1And2: {
    counter1: 0,
    counter2: 0,
  },
  counter3: 0,
  counter4: 0,
})

const countersOneAndTwoSelectors = derive({
  sum: (get) =>
    get(baseProxy.counter1And2).counter1 + get(baseProxy.counter1And2).counter2,
})
```

Now even if `counter3` and `counter4` are updated, it will not cause re-computation of `countersOneAndTwoSelectors`.
